<template>
  <div>
    app
    <h2>name:{{ name }}</h2>
    <h2>skill:{{ skill }}</h2>
    <h2>age:{{ age }}</h2>
    <h2>isAdult:{{ isAdult }}</h2>
    <button @click="store.commit('user/setSKill', '不抗冻')">
      修改数据-同步
    </button>
    <br />
    <button @click="store.dispatch('user/setNameAsync', '罗伯特')">
      修改数据-异步
    </button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    console.log('store:', store)

    const name = computed(() => store.state.user.name)

    return {
      name,
      skill: computed(() => store.state.user.skill),
      age: computed(() => store.state.user.age),
      isAdult: computed(() => store.getters['user/isAdult']),
      store
    }
  }
}
</script>

<style></style>
